<template>
  <div v-if="show" :class="className">
    <div class="close_outer">
      <i @click="close" class="el-icon-close"></i>
    </div>

    <el-form
      :model="ruleForm"
      :rules="rules"
      ref="ruleForm"
      label-width="100px"
      class="demo-ruleForm form"
    >
      <el-form-item v-if="which_op == 2" label="姓名" prop="name">
        <el-input v-model="ruleForm.name"></el-input>
      </el-form-item>
      <el-form-item label="用户名" prop="username">
        <el-input v-model="ruleForm.username"></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="pass">
        <el-input
          type="password"
          v-model="ruleForm.pass"
          autocomplete="off"
        ></el-input>
      </el-form-item>
      <el-form-item v-if="which_op == 2" label="确认密码" prop="checkPass">
        <el-input
          type="password"
          v-model="ruleForm.checkPass"
          autocomplete="off"
        ></el-input>
      </el-form-item>
      <el-form-item v-if="which_op == 2" label="年龄" prop="age">
        <el-input v-model="ruleForm.age"></el-input>
      </el-form-item>
      <el-form-item v-if="which_op == 2" label="出生日期" required>
        <el-col :span="11">
          <el-form-item prop="date">
            <el-date-picker
              type="date"
              placeholder="选择日期"
              v-model="ruleForm.date"
              style="width: 100%"
            ></el-date-picker>
          </el-form-item>
        </el-col>
      </el-form-item>
      <el-form-item v-if="which_op == 2" label="性别" prop="sex">
        <el-radio-group v-model="ruleForm.sex">
          <el-radio label="男"></el-radio>
          <el-radio label="女"></el-radio>
        </el-radio-group>
      </el-form-item>
      <div class="btns">
        <el-button v-if="which_op == 1" type="primary" @click="login"
          >登录</el-button
        >
        <el-button v-if="which_op == 1" @click="which_op = 2">
          点我注册</el-button
        >
        <el-button v-if="which_op == 2" type="primary" @click="sign"
          >注册</el-button
        >
        <el-button v-if="which_op == 2" @click="which_op = 1">
          点我登录</el-button
        >
      </div>
    </el-form>
  </div>
</template>

<script>
/*
  此表单我需要注意什么？
  复用性 -- 登录 注册两个表单
  登录   -- 用户名 + 密码
  注册   -- 姓名 年龄 用户名 性别(1/0) 密码 生日 创建时间 
  相同的是用户名和密码
  用户点击外层就可以直接关闭
*/
import To_Login from "../api/Login";
import To_Sign from "../api/Sign";
export default {
  name: "Form",
  data() {
    var validatePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码"));
      } else {
        if (this.ruleForm.checkPass !== "") {
          this.$refs.ruleForm.validateField("checkPass");
        }
        callback();
      }
    };
    var validatePass2 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入密码"));
      } else if (value !== this.ruleForm.pass) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };
    return {
      which_op: 1, // 1 登录 2 注册
      ruleForm: {
        username: "",
        date: "",
        sex: "男",
        pass: "",
        checkPass: "",
        age: "",
        name: "",
      },
      rules: {
        name: [
          { required: true, message: "请输入姓名", trigger: "blur" },
          {
            min: 1,
            max: 10,
            message: "长度在 1 到 10 个字符",
            trigger: "blur",
          },
        ],
        username: [
          { required: true, message: "请输入用户名", trigger: "blur" },
          {
            min: 1,
            max: 10,
            message: "长度在 1 到 10 个字符",
            trigger: "blur",
          },
        ],
        age: [
          { required: true, message: "请输入年龄", trigger: "blur" },
          {
            min: 1,
            max: 2,
            message: "请输入正确的年龄",
            trigger: "blur",
          },
        ],
        date: [
          {
            type: "date",
            required: true,
            message: "请选择日期",
            trigger: "change",
          },
        ],
        sex: [{ required: true, message: "请选择性别", trigger: "change" }],
        pass: [
          { required: true, message: "请输入密码", trigger: "blur" },
          { validator: validatePass, trigger: "blur" },
          {
            min: 6,
            max: 12,
            message: "密码在6-12位之间",
            trigger: "blur",
          },
        ],
        checkPass: [
          { required: true, message: "请再次输入密码", trigger: "blur" },
          { validator: validatePass2, trigger: "blur" },
        ],
      },
    };
  },
  methods: {
    login() {
      let { username, pass } = this.ruleForm;
      const params = new URLSearchParams();
      params.append("username", username);
      params.append("password", pass);
      To_Login(params).then((res) => {
        console.log(res.data);
        if (res.data.status == 200) {
          this.$store.commit("tologin", true);
          this.$store.commit("addInfomation", res.data.infomation);
          sessionStorage.setItem(
            "userinfo",
            JSON.stringify(res.data.infomation)
          );
          JSON.parse(sessionStorage.getItem("userinfo"));
          console.log(this.$store.state.infomation);
          this.$store.commit("changeshow", false);
        }
      });
    },
    sign() {
      if(!(this.ruleForm.pass == this.ruleForm.checkPass && this.ruleForm.pass.length >= 6 && this.ruleForm.pass.length <= 12) ){
        this.$message({
            message: "密码输入不一致或密码长度不正确",
            type: "error",
        });
        return 
      }
      if( !(this.ruleForm.name.length >= 1 && this.ruleForm.name.length <= 10) ){
        this.$message({
            message: "姓名长度不正确",
            type: "error",
        });
        return 
      }
      if( !(this.ruleForm.username.length >= 1 && this.ruleForm.username.length <= 10) ){
        this.$message({
            message: "用户名长度不正确",
            type: "error",
        });
        return 
      }
      if( this.ruleForm.age <= 0 || this.ruleForm.age >= 120 ){
        this.$message({
            message: "年龄非法",
            type: "error",
        });
        return 
      }
      if( !this.ruleForm.date ){
        this.$message({
            message: "请选择出生日期",
            type: "error",
        });
        return 
      }
      let { username, date, sex, pass, age, name } = this.ruleForm;
      console.log(username, date, sex, pass, age, name);
      sex = sex == "男" ? 1 : 0;
      const params = new URLSearchParams();
      params.append("username", username);
      params.append("password", pass);
      params.append("sex", sex);
      params.append("name", name);
      params.append("age", age);
      params.append("birthday", date.toString());
      To_Sign(params).then(() => {
        this.$message({
            message: "注册成功,请登录",
            type: "success",
        });
        this.$store.commit("changeshow", false);
      });
    },
    close() {
      this.$store.commit("changeshow", !this.$store.state.showlogin);
      this.which_op = 1;
    },
  },
  computed: {
    className() {
      let k = this.which_op == 1 ? "login" : "sign";
      let k2 = this.$store.state.skin;
      let m = k2 == true ? "light" : "dark";
      return "form_outer" + " " + k + " " + m;
    },
    show() {
      return this.$store.state.showlogin;
    },
  },
};
</script>

<style lang="less" scoped>
@import "../main.less";

.light {
  background-color: white;
  box-shadow: 0px 0px 10px 5px #ccc;
  color: @fs_light_contain;
  transition: all 1s;
  /deep/.el-input__inner {
    transition: all 1s;
  }
  /deep/ .el-button--primary {
    transition: all 1s;
  }
  /deep/ .el-button--default {
    transition: all 1s;
  }
}

.dark {
  background-color: @bg_dark_contain;
  box-shadow: 0px 0px 10px 5px rgb(95, 95, 95);
  color: @fs_dark_contain;
  transition: all 1s;
  /deep/.el-input__inner {
    background-color: #1c1c1c;
    transition: all 1s;
    color: @fs_dark_smcontain;
  }
  /deep/ .el-button--primary {
    background-color: @bt_deep_dark;
    color: @fs_dark_contain;
    transition: all 1s;
  }
  /deep/ .el-button--default {
    background-color: @bg_dark_blue;
    color: @fs_dark_contain;
    transition: all 1s;
  }
}
@media screen and (max-width: 800px) {
  /* 小于800px时 */
  .form_outer {
    position: absolute;
    left: calc(50% - 40vw);
    z-index: 1000;
    top: 15%;
    width: 80vw;
    border-radius: 8px;
  }
  .sign {
    height: 80vh;
  }

  .login {
    height: 35vh;
  }
}

@media screen and (min-width: 800px) {
  /* 大于800px时 */
  .form_outer {
    position: absolute;
    left: calc(50% - 20vw);
    z-index: 1000;
    top: 15%;
    width: 40vw;
    border-radius: 8px;
  }
  .sign {
    height: 75vh;
  }

  .login {
    height: 30vh;
  }
}
.close_outer {
  width: 100%;
  text-align: right;
  .el-icon-close {
    font-size: 18px;
    padding: 10px;
    cursor: pointer;
  }
}
.form {
  width: 80%;
}

.btns{
  width: 120%;
  display: flex;
  justify-content: space-around;
}

/deep/ .el-input__inner{
  width:120%;
}
</style>